import React, { Component } from "react";
import Card from "../UI/Card/index";
import "./Item.css";
import ConfirmModal from "../UI/ConfirmModal/index";

export default class Item extends Component {
  state = {
    showModal: false,
    yearValue: 2024,
  };
  onConfirm = () => {
    this.setState({ showModal: false });
    this.props.onDelete(this.state.id);
  };
  onShowModal = (m) => {
    this.setState({ showModal: true, id: m.id });
  };
  onChangeYear = e => {
    this.setState({ yearValue: e.target.value });
    this.props.onYearChange(e.target.value);
  };
  render() {
    const { data } = this.props;
    
    return (
      <>
        {this.state.showModal && (
          <ConfirmModal
            onConfirm={this.onConfirm}
            onCancel={() =>
              this.setState({
                showModal: false,
              })
            }
          />
        )}
        <div>
          <label htmlFor="year">年份: </label>
          <select value={this.state.yearValue} id="year" onChange={this.onChangeYear}>
            <option value="2024">2024</option>
            <option value="2025">2025</option>
          </select>
        </div>
        {data.map((m) => (
          <Card className="item " key={m.id}>
            <div className="left">
              <div className="title">
                {m.date.toLocaleDateString("zh-CN", { month: "long" })}
              </div>
              <div className="desc">{m.date.getDate()}</div>
            </div>
            <div className="right">
              <div className="top">{m.top}</div>
              <div className="bottom">{m.bottom}</div>
              <div
                className="delete"
                onClick={()=>
                  this.onShowModal(m)
                }
              >
                x
              </div>
            </div>
          </Card>
        ))}
      </>
    );
  }
}
